Dashboard Temp Share Shortlinks Frames API

HTMLify

index.html
Views: 70 | Author: cody 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="app.js" defer></script>
    <title>Carousel Portfolio</title>
  </head>
  <body>
    <nav data-toggled="false" data-transitionable="false">
      <div id="nav-logo-section" class="nav-section">
        <a href="#">
          <h1>LOGO</h1>
        </a>
      </div>
      <div id="nav-mobile-section">
        <div id="nav-link-section" class="nav-section">
          <a href="#">ABOUT</a>
          <a href="#">PROJECTS</a>
        </div>
        <div id="nav-social-section" class="nav-section">
          <a href="https://www.instagram.com/flexcode.io/" target="_blank">
            <i class="fa-brands fa-instagram"></i>
          </a>
          <a href="https://github.com/vishal-dcode" target="_blank">
            <i class="fa-brands fa-github-alt"></i>
          </a>
          <a href="https://vishalzen.medium.com/" target="_blank">
            <i class="fa-brands fa-medium"></i>
          </a>
        </div>
        <div id="nav-contact-section" class="nav-section">
          <a href="#">GET IN TOUCH</a>
        </div>
      </div>
      <button id="nav-toggle-button" type="button" onclick="handleNavToggle()">
        <span>Menu</span>
        <i class="fa-solid fa-bars"></i>
      </button>
    </nav>

    <main>
      <article data-index="0" data-status="active">
        <div class="article-image-section article-section"></div>
        <div class="article-description-section article-section">
          <p>A vintage website for an old school barbershop. After going to this shop a few times, I decided that I had to make a redesign for their website.</p>
        </div>
        <div class="article-title-section article-section">
          <h2>Sick Puppy Barber parlour</h2>
          <i class="fa-light fa-plus-large"></i>
        </div>
        <div class="article-nav-section article-section">
          <button class="article-nav-button" type="button" onclick="handleLeftClick()">
            <i class="fa-solid fa-arrow-left-long"></i>
          </button>
          <button class="article-nav-button" type="button" onclick="handleRightClick()">
            <i class="fa-solid fa-arrow-right-long"></i>
          </button>
        </div>
      </article>
      <article data-index="1" data-status="inactive">
        <div class="article-image-section article-section"></div>
        <div class="article-description-section article-section">
          <p>A selection of various concept designs that I've posted on Dribbble over the years.</p>
        </div>
        <div class="article-title-section article-section">
          <h2>Concept Designs</h2>
          <i class="fa-light fa-plus-large"></i>
        </div>
        <div class="article-nav-section article-section">
          <button class="article-nav-button" type="button" onclick="handleLeftClick()">
            <i class="fa-solid fa-arrow-left-long"></i>
          </button>
          <button class="article-nav-button" type="button" onclick="handleRightClick()">
            <i class="fa-solid fa-arrow-right-long"></i>
          </button>
        </div>
      </article>
      <article data-index="2" data-status="inactive">
        <div class="article-image-section article-section"></div>
        <div class="article-description-section article-section">
          <p>A selection of various concept designs that I've posted on Dribbble over the years.</p>
        </div>
        <div class="article-title-section article-section">
          <h2>Neato Toledo Lighthouse</h2>
          <i class="fa-light fa-plus-large"></i>
        </div>
        <div class="article-nav-section article-section">
          <button class="article-nav-button" type="button" onclick="handleLeftClick()">
            <i class="fa-solid fa-arrow-left-long"></i>
          </button>
          <button class="article-nav-button" type="button" onclick="handleRightClick()">
            <i class="fa-solid fa-arrow-right-long"></i>
          </button>
        </div>
      </article>
      <article data-index="3" data-status="inactive">
        <div class="article-image-section article-section"></div>
        <div class="article-description-section article-section">
          <p>A selection of various concept designs that I've posted on Dribbble over the years.</p>
        </div>
        <div class="article-title-section article-section">
          <h2>Super Space Blob</h2>
          <i class="fa-light fa-plus-large"></i>
        </div>
        <div class="article-nav-section article-section">
          <button class="article-nav-button" type="button" onclick="handleLeftClick()">
            <i class="fa-solid fa-arrow-left-long"></i>
          </button>
          <button class="article-nav-button" type="button" onclick="handleRightClick()">
            <i class="fa-solid fa-arrow-right-long"></i>
          </button>
        </div>
      </article>
    </main>
  </body>
</html>

Share this file: